﻿@model MvcCmsSocial.Models.ViewData.SocialModel
<div class="message-comment">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div>
                    write on @Model._User.UserName's wall</div>
                <textarea id="wall-commentbody" rows="1" cols="1" class="wall-commentbody"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">
                <a onclick="ShareOnWall();" href="javascript:void(0);">
                    <img border="0" alt="submit" src="/areas/mvccmsSocial/Content/sharebutton.gif" /></a>
            </td>
        </tr>
    </table>
</div>
<div>
    &nbsp;</div>
<div class="message-container">
    <div id="message-content" class="clearfix">
        <div id="columan">
            <div class="data clearfix">
                <h3>
                    posted
                </h3>
                <div id="wall-messages">
                    @{
                        var currentUser = Membership.GetUser();
                        string currentUserID = "";
                        string currentUserName = "";
                        if (currentUser != null)
                        {
                            currentUserID = currentUser.ProviderUserKey.ToString();
                            currentUserName = currentUser.UserName;
                        }
                        if (Model._SocialMessages.Count() > 0)
                        {

                            foreach (var message in Model._SocialMessages)
                            {
                                string likerMessage="";
                                if (message.Likes.Count() > 0)
                                {
                                    var lastLiker = message.Likes.OrderByDescending(l=>l.LikeID).FirstOrDefault().Liker;

                                    if (lastLiker.UserName == currentUserName)
                                    {
                                        likerMessage = "<img src='/areas/mvccmsSocial/content/thumbup.gif' /> You like this";
                                    }
                                    else
                                    {
                                        likerMessage = "<img src='/areas/mvccmsSocial/content/thumbup.gif' /> " + lastLiker.UserName + " likes this";
                                    }
                                }                    
                    <table id="messageHolder-@message.MessageID">
                        <tr>
                            <td valign="top">
                                <img alt="theirpic" src="/uploadedimages/@ViewData["portalProfileFolderName"]/Profiles/thumbs/@message.TheirPic" />
                            </td>
                            <td>
                                <div>
                                    <p>
                                        <span>@MvcHtmlString.Create(message.FromUserName.ToProfileLink())  @MvcHtmlString.Create(likerMessage)</span>
                                    </p>
                                    <div>
                                        @MvcHtmlString.Create(message.Body)
                                    </div>
                                    <span style="color: #808080; font-size: xx-small;">@message.ElapsedTime ago · <a onclick="LoadReplyBox(@message.MessageID);"
                                        href="javascript:void(0);">Comment</a> · <span id="like-@message.MessageID"><a onclick="YouLike(@message.MessageID);" href="javascript:void(0);">Like</a></span></span>
                                    <div id="reply-holder-@message.MessageID">
                    
                                @if (message.Replies.Count() > 0)
                                {
                                    foreach (var reply in message.Replies)
                                    {
                    
                                        <table>
                                            <tr>
                                                <td valign="top">
                                                    <a href="/social/profiles/@reply.FromUserName">        
                                                        <img height="40px" alt="theirpic" src="/uploadedimages/@ViewData["portalProfileFolderName"]/Profiles/thumbs/@reply.TheirPic" />
                                                    </a> 
                                                </td>
                                                <td>
                                                    <div>
                                                        <p>
                                                            <a href="/social/profiles/@reply.FromUserName">@reply.FromUserName</a>
                                                        </p>
                                                        <div >@MvcHtmlString.Create(reply.Body)
                                                        </div>
                                                        <span style="color: #808080; font-size: xx-small;">@reply.AddedDate.ToTimeSinceString() ago </span>
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                        
                                    }                                    
                                }                                                                                                
                                                        
                                    
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                                                                                    
                            }
                        }
                        else
                        {                    
                            <div id="emptyholder">Be The First To Write Here!</div>
                        }
                    }                    
                </div>
            </div>
        </div>
    </div>
    @Html.Partial("ControlsSocial/Pager", Model)
</div>
<div class="message-comment" id="message-comment" style="display: none;">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img id="yourPic" alt="yourpic" src="" />
            </td>
            <td>
                <textarea rows="1" id="replyBody" cols="1" class="message-replybody"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <a id="replyLink" href="javascript:void(0);">
                    <img border="0" alt="submit" src="/areas/mvccmsSocial/Content/commentbutton.gif" /></a>
            </td>
        </tr>
    </table>
</div>
<table id="messageHolder" style="display: none;">
    <tr>
        <td valign="top">
            <a id="theirLink" href="">
                <img id="theirPic" alt="theirpic" src="" />
            </a>
        </td>
        <td>
            <div>
                <p>
                    <a id="theirName" href=""></a>
                </p>
                <div id="theirMessage">
                </div>
                <span style="color: #808080; font-size: xx-small;"><span id="elapsedTime"></span>ago
                </span>
            </div>
        </td>
    </tr>
</table>
@Html.Hidden("ToUserID", Model._User.UserID) 
@Html.Hidden("FromUserID", currentUserID)

<script type="text/javascript">
    var profileThumbPath = '/uploadedimages/@ViewData["portalProfileFolderName"]/Profiles/thumbs/';
    var profilePath = '/social/profiles/';
    var currentUserPic = '@ViewData["CurrentUserPic"].ToString()';
    function LoadReplyBox(messageId) {        
        if ($('#FromUserID').val() == "") {
            alert("You must be logged in to write on the walls.");
            return false;
        }
        var replyClone = $('#message-comment').clone();

        $(replyClone).attr('id', 'message-comment-' + messageId);
        $(replyClone).find("#yourPic")
                        .attr('id', 'yourPic-' + messageId)
                        .attr('src', profileThumbPath + currentUserPic)
                        .attr('height', '40');
        $(replyClone).find("#replyLink")
                        .attr('id', 'replyLink-' + messageId)
                        .click(function () { ShareOnWall(messageId) });
        $(replyClone).find("#replyBody")
                        .attr('id', 'replyBody-' + messageId);

        $('#reply-holder-' + messageId).append(replyClone);
        $(replyClone).show();
        $(replyClone).fadeIn(3000);
    }
    function ShareOnWall(messageId) {
        if ($('#FromUserID').val() == "") {
            alert("You must be logged in to write on the walls.");
            return false;
        }
        var parentMessage, body;
        if (messageId == null) {
            parentMessage = {}
            body = $('#wall-commentbody').val();
        }
        else {
            parentMessage = {
                MessageID: messageId
            }
            body = $('#replyBody-' + messageId).val();
        }
        var fromUser = {
            UserID: $('#FromUserID').val()
        }
        var toUser = {
            UserID: $('#ToUserID').val()
        }
        var data = {
            FromUser: fromUser,
            ToUser: toUser,
            Body: body,
            ParentMessage: parentMessage
        }
        var encoded = JSON.stringify(data);
        var now = new Date();
        $.post(
	        "/socialajax/ShareOnWall/",
	        { data: encoded },
	        function (data) {
	            if (data.error) {
	                alert(data.error);
	            }
	            else {
	                $("#wall-commentbody").html("");
	                PopulateWall(data);
	            }
	        },
	        "json"
        );
    }
    function PopulateWall(message) {
        var holderClone = $("#messageHolder").clone();

        $(holderClone).attr('id', 'messageHolder-' + message.MessageID);
        $(holderClone).find("#theirPic")
                        .attr('id', 'theirPic-' + message.MessageID)
                        .attr('src', profileThumbPath + message.TheirPic)
                        .attr('height', '40');
        $(holderClone).find("#theirName")
                        .attr('id', 'theirName-' + message.MessageID)
                        .text(message.FromUserName)
                        .attr('href', profilePath + message.FromUserName);
        $(holderClone).find("#theirLink")
                        .attr('id', 'theirLink-' + message.MessageID)
                        .attr('href', profilePath + message.FromUserName);
        $(holderClone).find("#theirMessage")
                        .attr('id', 'theirMessage-' + message.MessageID)
                        .html(message.Body);
        $(holderClone).find("#elapsedTime")
                        .attr('id', 'elapsedTime-' + message.MessageID)
                        .text(message.ElapsedTime);
        $(holderClone).find("#reply-holder")
                        .attr('id', 'reply-holder-' + message.MessageID);

        if (message.ParentMessageID != null) {
            $("#reply-holder-" + message.ParentMessageID).html(holderClone);
        }
        else {
            $("#wall-messages").prepend(holderClone);
        }
        $("#emptyholder").hide();
        $('#wall-commentbody').val("");
        $(holderClone).fadeIn(3000);
    }
    function YouLike(messageId) {
        if ($('#FromUserID').val() == "") {
            alert("You must be logged in to like.");
            return false;
        }
        var fromUser = {
            UserID: $('#FromUserID').val()
        }
        var message = {
            MessageID: messageId
        }
        var data = {
            Liker: fromUser,
            Message: message
        }
        var encoded = JSON.stringify(data);
        var now = new Date();
        $.post(
	        "/socialajax/YouLike/",
	        { data: encoded },
	        function (data) {
	            if (data.error) {
	                alert(data.error);
	            }
	            else {
	                var newLikeImage = '<img id="newlike" src="/areas/mvccmsSocial/content/thumbup.gif" style="display:none;" /> You like this';
	                $('#like-' + messageId).html(newLikeImage);
	                $('#newlike').fadeIn(3000);
	            }
	        },
	        "json"
        );
    }
</script>
